@charset "UTF-8";
/* Dirty ! Dirty ! Dirty ! (Code smell according @_flexbox) */
* {
  margin: 0;
  padding: 0;
}


time {
  color: white;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 38px;
}
h1 {
    text-align: center;
}
time em {
  display: block;
  font-weight: 300;
  font-style: normal;
  font-size: 16px;
}
h2{
    text-align: center;
    color: #337ab7;
    font-family: "Helvetica";
}
header {
  padding: 50px 0;
  background: #ccc;
  text-align: center;
  font-family: "Roboto Condensed", sans-serif;
}
header a {
  display: inline-block;
  padding: 5px 20px;
  border-radius: 20px;
  background: #44b3ab;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 12px;
  transition: all 0.3s ease-in-out;
}
header a:hover {
  background: #249991;
  color: #ccc;
}

[role="main"] {
  overflow: hidden;
  padding: 15px;
  background: white;
  font-family: "Helvetica";
}

section ul {
  list-style-type: none;
}
section li {
  position: relative;
  display: inline-block;
  float: left;
  width: 75px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  zoom: 1;
  *display: inline;
}

.l-date--event {
  cursor: pointer;
  transition: background;
}
.l-date--event:hover {
  background: #efefef;
}

.m-bullet--event {
  position: absolute;
  top: 5px;
  right: 5px;
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ff6b6b;
}

.m-box--weeks {
  color: #e66b6b;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 10px;
}

.m-box--date {
  color: #555;
  font-size: 14px;
}

.l-date--passed {
  color: #bababa;
}

.eventTip {
  position: absolute;
  width: 150px;
  left: 50%;
  top: -125%;
  margin-left: -75px;
  background: #249991;
  color: white;
}
.eventTip:before {
  
  position: absolute;
  font-size: 25px;
  color: #249991;
  bottom: -19px;
  left: 46%;
}
